<template>
	<view class="small_store">
		<view class="header">
			<view class="item" @click="change_number">
				<text>销量</text>
				<image src="@/static/images/p3.png" v-if="number_sort=='desc'"></image>
				<image src="@/static/images/p4.png" v-else-if="number_sort=='asc'"></image>
				<image src="@/static/images/p.png" v-else></image>
			</view>
			<view class="item" @click="change_price">
				<text>价格</text>
				<image src="@/static/images/p3.png" v-if="price_sort=='desc'"></image>
				<image src="@/static/images/p4.png" v-else-if="price_sort=='asc'"></image>
				<image src="@/static/images/p.png" v-else></image>
			</view>
		</view>
		<scroll-view scroll-y class="scroll_view" @scrolltolower="loadmore">
			<view class="list">
				<view class="item" v-for="item in  _this.list" @click="router(`/pages/club/goods_deta?id=${item.id}`)">
					<image :src="item.img" class="cover"></image>
					<view class="item_view">
						<view class="name">{{item.name}}</view>
						<view class="synopsis">{{item.synopsis}}</view>
						<view class="price">
							<view class="unit">￥</view>
							<view class="value">{{item.price}}</view>
						</view>
						<view class="integral" v-if="item.integral">赠送<text>{{item.integral}}</text>积分</view>
					</view>
				</view>
			</view>
			<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		productLists,
		productStore
	} from "@/request/api";
	import useBase from "@/hooks/useBase.js";
	import useList from "@/hooks/useList.js";
	const {
		router
	} = useBase();
	const {
		_this
	} = useList();
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";
	const props = defineProps({
		id: [String, Number]
	});

	let number_sort = ref(""),
		price_sort = ref("");
	const getList = async () => {
		let {
			list
		} = await productStore({
			store_id: props.id,
			number_sort: number_sort.value,
			price_sort: price_sort.value,
			page: _this.page,
			limit: _this.limit
		});
		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};
	getList();
	const change_number = () => {
		_this.page = 1;
		_this.list = [];

		if (number_sort.value == "") {
			number_sort.value = "desc";
		} else if (number_sort.value == "desc") {
			number_sort.value = "asc";
		} else {
			number_sort.value = "";
		}
		getList();
	};
	const change_price = () => {
		_this.page = 1;
		_this.list = [];

		if (price_sort.value == "") {
			price_sort.value = "desc";
		} else if (price_sort.value == "desc") {
			price_sort.value = "asc";
		} else {
			price_sort.value = "";
		}
		getList();
	};
	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		getList();
	};
</script>

<style scoped lang="scss">
	.small_store {
		height: calc(100vh - var(--window-top) - var(--window-bottom) - #{$navBarHeight} - #{$tabbarHeight});
		overflow: hidden;

		.header {
			height: 110rpx;
			padding-left: 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			display: flex;
			align-items: center;

			.item {
				width: 180rpx;
				height: 50rpx;
				border-radius: 10rpx;
				margin-left: 20rpx;
				border: 1px solid #999999;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					color: #333333;
					font-size: 24rpx;
				}

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}

				&:first-child {
					margin-left: 0;

					image {
						width: 16rpx;
						height: 16rpx;
					}
				}
			}
		}

		.scroll_view {
			height: calc(100vh - var(--window-top) - var(--window-bottom) - #{$navBarHeight} - #{$tabbarHeight} - 110rpx) !important;
			padding: 0rpx 30rpx;
			box-sizing: border-box;

			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					width: 330rpx;
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					box-shadow: 0rpx 0rpx 7rpx 0rpx #EEEEEE;
					background: #FFFFFF;

					.cover {
						width: 100%;
						height: 330rpx;
					}

					.item_view {
						height: 180rpx;
						padding: 20rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.name {
							color: #222222;
							font-size: 26rpx;
							font-weight: bold;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.synopsis {
							color: #999999;
							font-size: 24rpx;
						}

						.price {
							display: flex;
							align-items: flex-end;

							.unit {
								color: #CA1C1D;
								font-size: 26rpx;
								font-weight: bold;
							}

							.value {
								color: #CA1C1D;
								font-size: 30rpx;
								font-weight: bold;
							}
						}

						.integral {
							display: flex;
							align-items: center;
							color: #CA1C1D;
							font-size: 20rpx;

							text {
								font-size: 22rpx;
							}
						}
					}
				}
			}
		}
	}
</style>